<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title> SVG DEMO - Shopping bag </title>
    <meta charset="utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <style type="text/css">
    .mouth {
        fill: none;
        stroke: #fff;
        stroke-width: 5;
        stroke-linecap: round;
        transform: rotate(280deg);
        transform-origin: 50% 50%;
        stroke-dashoffset: -23;
        stroke-dasharray: 42, 95;
        animation: anim-mouth .8s linear infinite;
    }
    
    @keyframes anim-mouth {
        0% {
            transform: rotate(-80deg);
            stroke-dasharray: 60, 95;
            stroke-dashoffset: 0;
        }
        40% {
            transform: rotate(280deg);
            stroke-dasharray: 60, 95;
            stroke-dashoffset: 0;
        }
        70%,
        100% {
            transform: rotate(280deg);
            stroke-dashoffset: -23;
            stroke-dasharray: 42, 95;
        }
    }
    </style>
</head>

<body>
    <svg width="100" height="100">
        <path d="M 20 40 L 80 40 L 80 90 A 10 10 90 0 1 70 100 L 30 100 A 10 10 90 0 1 20 90" style="fill: #e9e8ee;" />
        <path d="M 35 40 A 15 15 180 1 1 65 40" style="fill: none; stroke: #e9e8ee; stroke-width: 5;" />
        <circle cx="50" cy="70" r="15" class="mouth" />

        <path id="eyeleft" d="M 35 70 A 15 15 180 0 1 40 60" style="fill: none; stroke-width: 0;" />
        <circle class="eye" cx="" cy="" r="2.5" style="fill: #fff;">
            <animateMotion dur="0.8s" repeatCount="indefinite" keyPoints="0;0;1;1" keyTimes="0;0.3;0.9;1" calcMode="linear">
                <mpath xlink:href="#eyeleft" />
            </animateMotion>
        </circle>

        <path id="eyeright" d="M 40 60 A 15 15 180 0 1 60 60" style="fill: none; stroke-width: 0;" />
        <circle class="eye" cx="" cy="" r="2.5" style="fill: #fff;">
            <animateMotion dur="0.8s" repeatCount="indefinite" keyPoints="0;0;1;1" keyTimes="0;0.3;0.9;1" calcMode="linear">
                <mpath xlink:href="#eyeright" />
            </animateMotion>
        </circle>
    </svg>
</body>

</html>